<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>修改手机号</title>
	<link rel="stylesheet" type="text/css" href="../../../css/api.css" />
	<style>
		body,
		html {
			width: 100%;
			height: 100vh;
			background: rgba(0, 0, 0, 0.1);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		#app {
			padding: 15px;
			z-index: 1000;
			position: fixed;
			left: 15px;
			right: 15px;
			background: #ffffff;
			border-radius: 15px;
		}

		#app .bgs {
			width: 100%;
			background-color: #ffffff;
			box-sizing: border-box;
			padding: 5px;
			border-radius: 10px;
		}

		#app .ipt {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20px 0;
			width: 100%;
			border-bottom: 1px solid #f5f5f5;
		}

		#app .ipt:last-child {
			border: 0;
		}

		#app .ipt .text {
			flex: none;
			text-align: center;
			margin-right: 15px;
			font-size: 16px;
			color: #000000;
			line-height: 16px;
		}

		#app .ipt .get-code {
			flex: none;
			padding: 0 8px;
			border-radius: 25px;
			border: 1px solid #ff8657;
			color: #ff8657;
			font-size: 12px;
			line-height: 25px;
			text-align: center;
		}

		#app .ipt .times {
			padding: 0 8px;
			flex: none;
			border: 1px solid #f5f5f5;
			color: #ccc;
			background: #f5f5f5;
		}

		#app .ipt input {
			min-width: 0px !important;
			flex: auto;
			color: #000;
			font-weight: bold;
		}

		input::-webkit-input-placeholder {
			color: #999999;
			font-size: 14px;
			font-weight: 500;
		}

		#app .selec {
			font-size: 14px;
			line-height: 14px;
			margin: 50px 0;
			color: #000000;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		#app .btn {
			width: 100%;
			height: 50px;
			line-height: 50px;
			text-align: center;
			border-radius: 100px;
			font-size: 16px;
			margin: 10px 0;
			background-image: linear-gradient(45deg,
					#ff3a24 0%,
					#ff5340 100%);
			color: #ffffff;
			font-weight: bold;
		}

		#model {
			z-index: 0;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}
	</style>
</head>

<body>
	<div id="model" onclick="back()"></div>
	<div id="app">
		<div class="bgs">
			<div class="ipt">
				<div class="text">手机号</div>
				<input id='mobile' required maxlength="11" type="tel" placeholder="请输入您的电话号码">
			</div>
			<div class="ipt">
				<div class="text">验证码</div>
				<input id='code' type="text" placeholder="请输入验证码">
				<div class="get-code" onclick="getCode()">获取验证码</div>
			</div>
		</div>
		<div class="btn" onclick="confirm()">立即绑定</div>
	</div>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript">
	var click = true;
	apiready = function () {

	}

	function getCode() {
		let mobile = $api.trim($api.val($api.byId('mobile')));

		if (mobile.length > 0) {
		} else {
			api.toast({
				msg: '请先输入电话号码',
				duration: 2000,
				location: 'middle'
			});
			return;
		}

		if (click) {
			$api.ajax({
				url: 'api/member/send_sms',
				method: 'POST',
				data: {
					values: {
						type: 3,
						mobile: mobile
					}
				}
			}, function (ret) {
				var times = 60;
				click = false
				var timer = setInterval(function () {
					times--
					$api.html($api.dom('.get-code'), times + '秒后重新发送')
					$api.addCls($api.dom('.get-code'), 'times')
					if (times == 0) {
						clearInterval(timer)
						click = true
						$api.html($api.dom('.get-code'), '重新发送')
						$api.removeCls($api.dom('.get-code'), 'times')
					}
				}, 1000)
			});
		}
	}

	function confirm() {
		var mobile, code,
			mobile = $api.trim($api.val($api.byId('mobile')))

		if (mobile.length > 0) {
		} else {
			api.toast({
				msg: '请输入电话号码',
				duration: 2000,
				location: 'middle'
			});
			return;
		}

		code = $api.trim($api.val($api.byId('code')))
		if (code.length > 0) {
		} else {
			api.toast({
				msg: '请输入验证码',
				duration: 2000,
				location: 'middle'
			});
			return;
		}
		$api.ajax({
			url: 'api/member/mobile',
			method: 'POST',
			data: {
				values: {
					mobile: mobile,
					sms_code: code
				}
			}
		}, function (ret) {
			api.toast({
				msg: '绑定成功',
				duration: 2000,
				location: 'middle'
			});
			setTimeout(() => {
				back();
			}, 1000);
		});
	}

	function back() {
		api.closeFrame({
		});
	}
</script>

</html>
